@import "../../../customGlobal.scss";
.remarksDiv {
    margin: 0 1.25rem;
}
.title {
    padding-bottom: 1.44rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1.25rem;
    width: 100%;
    border-bottom: 0.03rem solid rgba(235, 235, 237, 1);
}
.remarksTitle {
    font-size: 1.25rem;
    font-weight: bold;
    color: #27282e;
    @if $appType == "LJ" {
        color: $LJLabelColor;
    }
}
.remarksImg {
    display: flex;
}
.img1 {
    width: 1rem;
    height: 1rem;
}
.img2 {
    width: 1rem;
    height: 1rem;
    margin-left: 1.5rem;
}
.remarksPeople {
    margin-top: 1rem;
    border-bottom: 0.03rem solid rgba(235, 235, 237, 1);
    @if $appType == "LJ" {
        border-bottom: 0.03rem solid #e8eaed;
    }
}
.imgRight {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 1.88rem);
}
.peopleName {
    font-size: 0.88rem;
    color: #858894;
    @if $appType == "LJ" {
        color: #7e838c;
    }
    margin-right: 0.63rem;
    height: 1rem;
    line-height: 1rem;
    vertical-align: middle;
}
.peopleTag {
    display: unset;
    padding: 0.16rem 0.31rem;
    background: #edeff3;
    color: #8695b3;
    font-size: 0.69rem;
    height: 1rem;
    line-height: 0.69rem;
}
.peopleMore {
    color: #637aa6;
    font-size: 0.81rem;
    float: right;

}
.peopleTime {
    font-size: 0.75rem;
    color: #b6b7bf;
    margin-top: 0.44rem;
}
.peopleMessage>img {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.63rem;
    border-radius: 50%;
}
.ionicImg {
    margin-bottom: 0.2rem;
    width: 0.38rem;
    height: 0.63rem;
    margin-left: 0.31rem;
}
.remarksContent {
    margin-top: 0.75rem;
    font-size: 0.94rem;
    font-weight: 500;
    color: #27282e;
    line-height: 1.44rem;
    margin-bottom: 0.69rem;
}
.remarksPeopleImgs {
    margin-top: 0.38rem;
    margin-bottom: 0.94rem;
}
.box:nth-of-type(4n) {
    margin: 0;
}
.box {
    width: 23.125%;
    display: inline-block;
    vertical-align: top;
    margin-right: 2.5%;
    position: relative;
    padding-bottom: 23.125%;
}
.box-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.13rem;
}
.tip {
    position: absolute;
    right: 0.31rem;
    bottom: 0.31rem;
    height: 1.13rem;
    background: rgba(39, 40, 46, 0.8);
    border-radius: 0.56rem;
    font-size: 0.69rem;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.13rem;
    padding: 0 0.44rem;
}
.noRemark {
    font-size: 1rem;
    margin: 2.5rem 0px 0px;
    color: rgb(92, 94, 102);
    line-height: 1rem;
    text-align: center;
}
.button {
    margin-top: 1rem;
    margin-bottom: 1.25rem;
    background: rgba(245, 245, 247, 1);
    @if $appType == "LJ" {
        background: #f4f6f9;
    }
    border-radius: 0.31rem;
    padding: 0.88rem 0;
}
.button-p {
    line-height: 1rem;
    height: 1rem;
    font-weight: bold;
    font-size: 1rem;
    color: #7485a6;
    text-align: center;
    text-indent: 0.06rem;
}
.templete {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
    z-index: 10;
    display: block;
    top: 0;
}

.imgRightBox {
    height: 1rem;
    display: flex;
    justify-content: space-between;
}

.peopleRecommandTime {
    font-size: 0.75rem;
    font-weight: 400;
    color: rgba(182, 183, 191, 1);
    vertical-align: middle;
}

.recommendTitle {
    height: 1.33rem;
    font-size: 0.93rem;
    font-weight: 400;
    color: rgba(39, 40, 46, 1);
    @if $appType == "LJ" {
        color: $LJLabelColor;
    }
    margin-bottom: 0.5rem;
}
.secondTitle {
    font-size: 0.94rem;
    font-weight: 500;
    color: rgba(255, 99, 20, 1);
    margin-left: 1.25rem;
    @if $appType == "LJ" {
        color: $LJRedColor;
    }
}
.thirdTitle {
    font-size: 0.88rem;
    color: $LJLabelColor;
}
.recommendation {
    display: flex;
    font-size: 0.75rem;

    font-weight: 400;
    color: rgba(133, 136, 148, 1);
    margin-bottom: 0.81rem;
}

.recommendation-div {
    margin-right: 0.31rem;
}

.recommendation-img {
    width: 1rem;
    height: 1rem;
    margin-right: 0.31rem;
}

.remarks-button {
    display: flex;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
    margin-left: 1.5rem;
}
.remarks-button-span {
    font-size: 0.81rem;
    font-weight: 500;
    color: #959ba6;
    line-height: 0.81rem;
}

.remarks-button-img {
    width: 0.44rem;
    height: 0.75rem;
    margin-left: 0.31rem;
}
.spanBtn {
    width: auto;
    padding-left: 1.13rem;
    padding-right: 1.13rem;
    height: 1.56rem;
    border: 0.03rem solid #b6b7bf;
    font-size: 0.69rem;
    text-align: center;
    border-radius: 1rem;
    color: #5c5e66;
    display: inline-block;
    margin-right: 0.5rem;
    line-height: 1.56rem;
    margin-bottom: 0.94rem;
}
.buttonBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.buttons {
    margin-left: 0.35rem;
}
.moreButtons {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    text-align: center;
    color: #5c5e66;
    display: inline-block;
    font-size: 0.69rem;
    line-height: 1.56rem;
    height: 1.56rem;
    flex-basis: 5.2rem;
}

.leftBox {
    flex-basis: 5rem;
}
